<template>
  <div class="app-container">
    <el-date-picker

      v-model="dateRange"
      type="datetimerange"
      range-separator="——"
      :start-placeholder="$t('开始日期')"
      :end-placeholder="$t('结束日期')">
    </el-date-picker>
    <el-select v-model="statisticQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>
    <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleStatisticQuery">{{$t('Search')}}</el-button>
    <el-card>
      <div class="table-layout">
        <el-descriptions :title="$t('优惠券使用统计')" direction="vertical" :column="5" border>
          <el-descriptions-item :label="$t('已领取数量')">{{ statistics.receiveNum }}</el-descriptions-item>
          <el-descriptions-item :label="$t('已使用数量')">{{ statistics.useNum }}</el-descriptions-item>
          <el-descriptions-item :label="$t('使用优惠券订单总额')">${{ statistics.orderSumMoney}}</el-descriptions-item>
          <el-descriptions-item :label="$t('总优惠金额')">${{ statistics.discountsSumMoney}}</el-descriptions-item>
          <el-descriptions-item :label="$t('总订单价格')">${{ statistics.orderSumMoney}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card>
      <el-select clearable v-model="listQuery.status" :placeholder="$t('请选择')">
        <el-option :label="$t('已使用')" :value="true"></el-option>
        <el-option :label="$t('未使用')" :value="false"></el-option>
      </el-select>
      <el-input style="width: 200px;margin-bottom: 10px" :placeholder="$t('请输入用户名')" v-model="listQuery.userName">
        <i slot="suffix" class="el-input__icon el-icon-user"></i>
      </el-input>
      <el-button @click="getList" type="primary" icon="el-icon-search">{{$t('搜索')}}</el-button>
      <el-table
        :data="userCouponlist"
        border
        style="width: 100%">
        <el-table-column prop="id" label="用户优惠券编号" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="180">
          <template slot-scope="scope">
            {{ scope.row.userName?scope.row.userName:'未绑定用户' }}
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="领取时间"></el-table-column>
        <el-table-column prop="address" label="使用状态">
          <template slot-scope="scope">
            {{ scope.row.usedTime?'已使用':'未使用' }}
          </template>
        </el-table-column>
        <el-table-column prop="usedTime" label="使用时间">
          <template slot-scope="scope">
            {{ scope.row.usedTime?scope.row.usedTime:'未领取' }}
          </template>
        </el-table-column>
        <el-table-column prop="usedTime" label="过期状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.usedTime">{{ scope.row.usedTime?'已使用':'未使用' }}</el-tag>
            <el-tag :type="Date.parse(scope.row.endTime) > new Date()?'':'warning'">
              {{Date.parse(scope.row.endTime) > new Date()?'未过期':'已过期' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" :label="$t('关联订单')">
          <template slot-scope="scope">
            {{ scope.row.usedTime?scope.row.orderId:'未使用' }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listQuery.total > 10" :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getList" />
    </el-card>
  </div>
</template>
<script>
import {statisticsStrategys,usersStrategys} from '@/api/couponStrategy'
import Pagination from '@/components/Pagination'
import {getToken} from "../../utils/auth";
import {allForPerm} from "../../api/shop";
export default {
  name: "strategyCouponStatistic",
  components: { Pagination },
  data() {
    return {
      listQuery:{
        id:undefined,
        total: 0,
        userName:'',
        status:'',
        limit:20,
        page:1,
        startTime: undefined,
        endTime: undefined,
        shopId: undefined
      },
      shops: [],
      userCouponlist:[],
      statisticQuery: {
        id:undefined,
        startTime: undefined,
        endTime: undefined,
        shopId: undefined
      },
      statistics:{
        receiveNum: 0,
        useNum: 0,
        orderSumMoney: 0.00,
        discountsSumMoney: 0.00,
      },
      dateRange:'',
    }
  },
  created() {
    this.init()
    if (this.$route.query.id == null) {
      return
    }
    allForPerm().then(response=>{
      this.shops = response.data.data.list
    })
    this.getList()
  },
  methods: {
    init: function() {
      if (this.$route.query.id == null) {
        return
      }
      this.statisticQuery.id=this.$route.query.id
      console.log(this.statisticQuery)
      statisticsStrategys(this.statisticQuery).then(response => {
        this.statistics = response.data.data
      })
    },
    getList(){
      this.listQuery.id=this.$route.query.id
      this.listQuery.shopId= this.statisticQuery.shopId
      if(this.dateRange){
        this.listQuery.startTime=this.dateRange[0]
        this.listQuery.endTime=this.dateRange[1]
      }else {
        this.listQuery.startTime=null
        this.listQuery.endTime=null
      }
      usersStrategys(this.listQuery).then(res=>{
        this.userCouponlist=res.data.data.list
        this.listQuery.total=res.data.data.total
        }).catch(() => {
        this.userCouponlist=[]
        this.listQuery.total=0
      })
    },
    handleStatisticQuery(){
      if(this.dateRange){
        this.statisticQuery.startTime=this.dateRange[0]
        this.statisticQuery.endTime=this.dateRange[1]
      }else {
        this.statisticQuery.startTime=null
        this.statisticQuery.endTime=null
      }
      statisticsStrategys(this.statisticQuery).then(response => {
        this.statistics = response.data.data
      })
      this.getList()
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  }
}
</script>

<style scoped>

</style>
